<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>我的车辆拍照</title>
		<link rel="stylesheet" href="statics/css/bootstrap.min.css" />
		<script type="text/javascript" src="statics/js/bootstrap.min.js"></script>

		<style type="text/css">
			body {
				background: #E7F4FF;
				margin-right: 0rem;
			}
			
			.jd {
				margin: 1rem 0rem;
				padding: 0rem 3rem;
			}
			
			.container {
				background: ghostwhite;
				border-radius: 1rem;
				margin: 1rem 2rem;
				box-shadow: 0rem 0rem 1rem lightblue;
			}
			
			.baoan {
				border-radius: 3rem;
				border: 0.05rem solid #00CED1;
				margin: 1rem 0rem;
				padding-right: 7rem;
			}
			
			.top {
				background: linear-gradient(to right, #5fd6fc, #5ef0c0);
				padding: 1rem 0rem 2rem 0rem;
				margin-right: 0rem;
			}
			
			.main {
				position: absolute;
				top: 10rem;
				margin: 0rem;
				padding: 0rem;
				width: 100%;
			}
			
			.pic {
				display: inline;
				padding: 0rem;
				margin: 0rem;
				width: 6rem;
				height: 6rem;
			}
			
			.ii {
				display: block;
				padding: 0.8rem;
				margin: 0rem;
				width: 100%;
				height: 100%;
				border-radius: 2rem;
			}
			
			.in {
				display: block;
				position: absolute;
				top: 2rem;
			}
			
			.div1 {
				padding-left: 1rem;
				padding-bottom: 2rem;
				margin-bottom:3rem;
			}
			
			.aad {
				position: absolute;
				padding: 0px;
				bottom: 0em;
				width: 100%;
				background: #87CEFA;
			}
			
			.afhsy {
				color: white;
				display: block;
				width: 100%;
				height: 3em;
				line-height: 3em;
				text-decoration: none;
				border: 0rem;	
				margin: 0rem;
				background: #87CEFA;
			}
			.delete{
				position: absolute;
				display:none;
				top: 0.4rem;
				right: 0.2rem;
				width: 2rem;
				z-index: 10;
			}
		</style>
	</head>

	<body>
		<div class="top">
			<img src="statics/img/ccx_img/9a50098628cdc82d3de1eb1593599f9.png" class="jd img-responsive" />
		</div>
		<div class="main">

			<!--车辆信息-->
			<div class="container">
				<div class="baoan">
				
					<p class="h6" style="color: #00CED1;">&nbsp&nbsp&nbsp&nbsp&nbsp报案号:${caseone.caseno}</p>
				</div>

				<p class="h3">&nbsp&nbsp${caseDiscribe.carnumber}</p>
				<p class="h6" style="float: right;color: dimgrey;">-----------出险时间：${caseDiscribe.insurancetime}</p>
			</div>

			<form action="addPhoto" method="post" enctype="multipart/form-data" id="form1">
			<input type="hidden" name="uuid" value="${caseone.caseno}"/>
			<input type="hidden" name="carnumber" value="${caseDiscribe.carnumber}"/>
			<input type="hidden" name="insurancetime" value="${caseDiscribe.insurancetime}"/>
			<!--上传图片-->
			<div class="container div1">

				<p class="h6" style="color: dimgrey;"><img src="statics/img/ccx_img/4335353.png" width="16rem" class="img-responsive" style="display: inline;padding-bottom: 0.3rem;" /> 以下5种照片类型每项至少上传一张照片，请在确保安全的情况下，上传您的车损照片
				</p>

				<!--全车现场-->
				<div class="quanchexianchang">
					<div>
						<p class="h4" style="color: dimgrey;padding-top: 1rem;"><img src="statics/img/ccx_img/che.png" width="50rem" class="img-responsive" style="display: inline;padding: 0rem 1rem 0.5rem 1rem;" />全车现场</p>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file1" class="form-control pic col-xs-12 in" id="zx_img1" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview1" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p1">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="delete1" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file1" class="form-control pic col-xs-12 in" id="zx_img2" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview2" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p1">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete"  id="delete2" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file1" class="form-control pic col-xs-12 in" id="zx_img3" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview3" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p1">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete"  id="delete3" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file1" class="form-control pic col-xs-12 in" id="zx_img4" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview4" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p1">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete"  id="delete4" onclick="del()"/>
					</div>
				</div>
				<br /><br /><br />

				<!--车架号-->
				<div class="chejiahao">
					<div>
						<p class="h4" style="color: dimgrey;padding-top: 1rem;"><img src="../statics/img/ccx_img/no.png" width="50rem" class="img-responsive" style="display: inline;padding: 0rem 1rem 0.5rem 1rem;" />车架号</p>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file2" class="form-control pic col-xs-12 in" id="zx_img5" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview5" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p2">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete"  id="delete5" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file2" class="form-control pic col-xs-12 in" id="zx_img6" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview6" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p2">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete"  id="delete6" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file2" class="form-control pic col-xs-12 in" id="zx_img7" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview7" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p2">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete"  id="delete7" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file2" class="form-control pic col-xs-12 in" id="zx_img8" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview8" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p2">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="delete8" onclick="del()"/>
					</div>
				</div>
				<br /><br /><br />

				<!--远景-->
				<div class="yuanjing">
					<div>
						<p class="h4" style="color: dimgrey;padding-top: 1rem;"><img src="statics/img/ccx_img/yuanjing.png" width="50rem" class="img-responsive" style="display: inline;padding: 0rem 1rem 0.5rem 1rem;" />远景</p>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file3" class="form-control pic col-xs-12 in" id="zx_img9" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview9" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p3">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete"  id="delete9" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file3" class="form-control pic col-xs-12 in" id="zx_img10" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview10" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p3">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete"  id="delete10" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file3" class="form-control pic col-xs-12 in" id="zx_img11" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview11" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p3">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete"  id="delete11" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file3" class="form-control pic col-xs-12 in" id="zx_img12" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview12" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p3">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="delete12" onclick="del()"/>
					</div>
				</div>
				<br /><br /><br />

				<!--近景-->
				<div class="jinjing">
					<div>
						<p class="h4" style="color: dimgrey;padding-top: 1rem;"><img src="statics/img/ccx_img/jinjing.png" width="50rem" class="img-responsive" style="display: inline;padding: 0rem 1rem 0.5rem 1rem;" />近景</p>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file4" class="form-control pic col-xs-12 in" id="zx_img13" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview13" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p4">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="delete13" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file4" class="form-control pic col-xs-12 in" id="zx_img14" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview14" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p4">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="delete14" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file4" class="form-control pic col-xs-12 in" id="zx_img15" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview15" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p4">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="delete15" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file4" class="form-control pic col-xs-12 in" id="zx_img16" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview16" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p4">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="delete16" onclick="del()"/>
					</div>
				</div>
				<br /><br /><br />

				<!--细节-->
				<div class="xijie">
					<div>
						<p class="h4" style="color: dimgrey;padding-top: 1rem;"><img src="statics/img/ccx_img/xijie.png" width="50rem" class="img-responsive" style="display: inline;padding: 0rem 1rem 0.5rem 1rem;" />细节</p>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file5" class="form-control pic col-xs-12 in" id="zx_img17" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview17" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p5">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="delete17" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file5" class="form-control pic col-xs-12 in" id="zx_img18" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview18" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p5">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="delete18" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file5" class="form-control pic col-xs-12 in" id="zx_img19" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview19" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p5">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="delete19" onclick="del()"/>
					</div>
					<div class="pic col-xs-3">
						<input type="file" accept="image/*" capture="camera" name="file5" class="form-control pic col-xs-12 in" id="zx_img20" style="padding: 0px;position:absolute;opacity:0;" multiple/>
						<img id="img_preview20" data-src="" src="statics/img/ccx_img/kuangkuang.png" data-holder-rendered="true" class="ii img-responsive p5">
						<img src="statics/img/ccx_img/xiaochacha.png" class="img-responsive delete" id="delete20" onclick="del()"/>
					</div>
				</div>

			</div>

			<br /><br />
			<div class="col-xs-12 aad">
				
				<input class="afhsy h4" type="submit" value="下一步"/>
			</div>
		</div>
		</form>
	</body>
	<script type="text/javascript" src="statics/js/jquery-1.12.4.js"></script>
	<script type="text/javascript" src="statics/js/ccx_photo.js"></script>
	<script type="text/javascript">
		function del(){
			$(".delete").click(function(){
				$(this).hide();
			$(this).prev().attr("src","statics/img/ccx_img/kuangkuang.png");
			});
		}
		
		$("#form1").submit(function(){
			var a = 0; 
			var b = 0;
			var c = 0; 
			var d = 0; 
			var e = 0;
			$(".p1").each(function(){
				if($(this).attr("src")!="statics/img/ccx_img/kuangkuang.png"){	
					a=1;
				}
			});
			$(".p2").each(function(){
				if($(this).attr("src")!="statics/img/ccx_img/kuangkuang.png"){
					b=1
				}
			});
			$(".p3").each(function(){
				if($(this).attr("src")!="statics/img/ccx_img/kuangkuang.png"){		
					c=1;
				}
			});
			$(".p4").each(function(){
				if($(this).attr("src")!="statics/img/ccx_img/kuangkuang.png"){		
					d=1;
				}
			});
			$(".p5").each(function(){
				if($(this).attr("src")!="statics/img/ccx_img/kuangkuang.png"){		
					e=1;
				}
			});
			
			if(a==0){alert("请上传全车现场照片！");
				 return false;
			}else if(b==0){
				alert("请上传车架号照片！");
				 return false;
			}else if(c==0){
				alert("请上传远景照片！");
				 return false;
			}
			else if(d==0){
				alert("请上传近景照片！");
				 return false;
			}else if(e==0){
				alert("请上传细节照片！");
				 return false;
			}
		});
		
		

				
			
	</script>

</html>